<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bind</title>
  <style>
    .x{background: blue}
    .y{font-size: 100px}
    .z{color: pink}
  </style>
</head>
<body>
<div id="app">
  对象方式<br/>
  <div class="x" :class="{z:flag,y:false}">哈哈哈哈</div>

  数组方式<br/>
  <div class="x" :class="[class1,class2,{z:false}]">哈哈哈哈</div>

  <p/>

  <div v-for="(a,index) in 10" :class="{x:index % 2}">{{a}}</div>
</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  // class="a b c" style="backgroud:'color'"
  //一种是对象，一种是数组
  let vm = new Vue({
    el: '#app',
    data: {
      class1:'x',
      class2:'y',
      flag:true

    }
  })
</script>
</html>
